<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Div Resize</title>
    <style>

        .example {
            position: relative;
            line-height: 20px;
        }



        .sensor,
        .sensor-expand,
        .sensor-shrink {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            overflow: scroll;
            z-index: -1;
            
        }

        .sensor-expand-child,
        .sensor-shrink-child {
            position: absolute;
            left: 0;
            top: 0;
            width: 200%;
            height: 200%;
        }

        .sensor-shrink-child {
            width: 200%;
            height: 200%;
        }
    </style>
</head>

<body>
    <div class="example">
        <div class="sensor">
            <div class="sensor-expand">
                <div class="sensor-expand-child"></div>
            </div>
            <div class="sensor-shrink">
                    <div class="sensor-shrink-child"></div>
                </div>
            </div>
        <button class="plus">+</button>
        <button class="minus">-</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse luctus tempor tellus vitae volutpat.</p>
    </div>

</body>
<script>
    var element = document.querySelector('.example');
    var resizeSensor = element.querySelector('.sensor');
    var expand = resizeSensor.querySelector('.sensor-expand');
    var expandChild = resizeSensor.querySelector('.sensor-expand-child');
    var shrink = resizeSensor.querySelector('.sensor-shrink');
    var shrinkChild = resizeSensor.querySelector('.sensor-shrink-child');
    
    var lastWidth, lastHeight;
    
    var reset = function() {
      expandChild.style.width = (expand.offsetWidth + 10) + 'px';
      expandChild.style.height = (expand.offsetHeight + 10) + 'px';
      expand.scrollLeft = expand.scrollWidth;
      expand.scrollTop = expand.scrollHeight;
      shrink.scrollLeft = shrink.scrollWidth;
      shrink.scrollTop = shrink.scrollHeight;
      lastWidth = element.offsetWidth;
      lastHeight = element.offsetHeight;
    };
    
    reset();
    
    var changed = function() {
      console.log('size changed');
    };
    
    expand.addEventListener('scroll', function() {
      if (element.offsetWidth > lastWidth || element.offsetHeight > lastHeight) {
        changed();
      }
      reset();
    });
    
    shrink.addEventListener('scroll', function() {
      if (element.offsetWidth < lastWidth || element.offsetHeight < lastHeight) {
        changed();
      }
      reset();
    });
    
    var height = 20;
    document.querySelector('.plus').addEventListener('click', function() {
      element.style.lineHeight = (height += 1) + 'px';
    });
    document.querySelector('.minus').addEventListener('click', function() {
      element.style.lineHeight = (height -= 1) + 'px';
    });
    
</script>

</html>